<!--
 * @Author: yuanjunyi
 * @Date: 2024-02-23 14:33:26
 * @LastEditors: qf
 * @LastEditTime: 2024-05-27 10:56:30
 * @Description: this is description
-->
<template>
  <div class="banner">
    <div class="banner-title">
      <h3>履约保-合同履约管理专家</h3>
      <h5>履约保，保履约</h5>
      <h5>用了履约保，履约没烦恼</h5>
      <div><span @click="show = true">开始体验</span></div>
    </div>
    <img :src="imgUrl + 'guarantee-bg.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>行业痛点</div>
      <p>您的企业，是否面临如下合同管理挑战？</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul>
    <div class="part-title">
      <div>解决方案</div>
      <p>合同履约全生命周期管理，全过程数字化，降本增效预防合同风险</p>
    </div>
  </div>
  <div
    class="part-problem"
    :style="`background: url(${imgUrl}solution-whole2.png) no-repeat center center; background-size: cover;`"
  ></div>
  <div class="part">
    <div class="part-title">
      <div>系统架构图</div>
      <p>合同履约过程中形成数据链，提升企业风险防控能力</p>
    </div>
    <img
      style="
        margin: auto;
        width: 1280px;
        height: 728px;
        display: block;
        margin-bottom: 100px;
      "
      :src="`${imgUrl}architecture-diagram2.png`"
      alt=""
    />
  </div>
  <div class="part" style="background: #f7f9ff; overflow: hidden">
    <div class="part-title" style="margin-top: 60px">
      <div>【履约保】产品亮点</div>
      <p>全过程履约管控，预防合同风险内置合同风险模型，智能识别、自动提醒</p>
    </div>
    <div style="width: 66.7%; margin: auto">
      <div class="btn-tabs">
        <div
          class="sim-button button2"
          :data-text="item.title"
          v-for="item in brightSpotArray"
          @click="handleClickTab(item)"
          :class="item.title === btn ? 'sim-button__active' : ''"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div style="margin: 0 auto 80px">
        <el-carousel indicator-position="outside" arrow="never">
          <el-carousel-item v-for="item in pointData" :key="item">
            <img style="margin: auto; display: block" :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
        <div></div>
      </div>
    </div>
  </div>
  <div>
    <div class="part-title" style="margin-top: 60px">
      <div>履约保五大优势</div>
      <p>专注工程项目企业合同履约</p>
    </div>
    <five-advantages :advantageDate="advantageDate" />
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { arrData, brightSpotArray, advantageDate } from "./constants";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
import fiveAdvantages from "@/views/software-mall/dispatch-work-apply/major/components/five-advantages.vue";

const pointData = ref(brightSpotArray[0].photosData);
/* 产品两点区域 */
const btn = ref(brightSpotArray[0].title);
const handleClickTab = (item) => {
  btn.value = item.title;
  pointData.value = item.photosData;
  console.log(item);
};
const show = ref(false);
const show1 = ref(false);
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 30%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-align: left;
    h3 {
      font-size: 42px;
      line-height: 49px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 20px;
      line-height: 23px;
      margin-bottom: 20px;
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 12px 50px;
        background-color: #fff;
        color: #1678ff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
/* .part {
    height: 717px;
  } */
ul {
  display: flex;
  /* width: calc(100% - 640px); */
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: space-around;

  li {
    /* width: 250px; */
    /* background-color: #ebecf0; */

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 16px;
    }
    div {
      font-size: 20px;
      line-height: 30px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}
.part-problem {
  height: 667px;
}
.btn-tabs {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.sim-button {
  text-align: center;

  cursor: pointer;
  padding: 8px 24px;
  background-color: #f4f4f4;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 1); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}
.button2 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.button2:hover {
  background-color: #1678ff;
  color: #fff;
}
.button2 > span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover > span {
  opacity: 0;
}
.button2::after {
  content: attr(data-text);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #fff;
}
.button2:hover::after {
  left: 0;
  opacity: 1;
}
.sim-button__active {
  background-color: #1678ff;
  color: #fff;
}
/* 产品两点tip */
/* .banner-tip {
    position: absolute;
  } */
:deep(.el-carousel__container) {
  height: 702px;
}
:deep(.el-carousel__indicators--outside button) {
  /* background-color: var(--el-carousel-indicator-out-color); */
  opacity: 1;
  background: #ebecf0;
  width: 90px;
  height: 6px;
  border-radius: 4px;
}
:deep(.el-carousel__indicator.is-active button) {
  background-color: #1678ff;
}
</style>
